<template>
  <div
    class=" com_box flexbox flexcolumn height_100"
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0)"
  >
  <div class="sch_head  flexbox flexcenter ">
            <div class="tab_title color_01">{{$route.query.nickname}} {{ queryInfo.need_date[0] }} -- {{ queryInfo.need_date[1] }}</div>
        </div>
        <div class="flex over_box table_box">
                <el-table :data="tableData" class="com_table"  ref="straRef" height="100%" @sort-change='sortChange'>
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height: 300px;">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="nickname" label="项目" min-width="300">
                        <template slot-scope="scope">
                            <div v-html="getProName(scope.row)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="channel" label="平台渠道" width="140">
                        <template slot-scope="scope">
                           {{  channelList[scope.row.channel - 1] }}
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="avg_cost" label="平均消耗" width="140" sortable="custom" >
                        <template slot-scope="scope">
                            {{scope.row.avg_cost?scope.row.avg_cost:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="reject_num" label="卡审数" width="140" sortable="custom" >
                        <template slot-scope="scope">
                            {{scope.row.reject_num?scope.row.reject_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_num" label="视频条数" width="140" sortable="custom" >
                        <template slot-scope="scope">
                            {{scope.row.total_num?scope.row.total_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_num_rate" label="视频条数占比" width="150" sortable="custom" >
                        <template slot-scope="scope">
                            {{scope.row.total_num_rate?scope.row.total_num_rate:'0' | keepTwoNum}}%
                        </template>
                    </el-table-column>
                    <el-table-column prop="original_video_num" label="原创视频条数" width="150" sortable="custom" >
                        <template slot-scope="scope">
                            {{scope.row.original_video_num?scope.row.original_video_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="performance_video_num" label="绩效视频条数" width="150" sortable="custom" >
                        <template slot-scope="scope">
                            {{scope.row.performance_video_num?scope.row.performance_video_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_video" label="短视频消耗" width="150" sortable="custom" >
                        <template slot-scope="scope">
                            {{scope.row.stat_cost_video?scope.row.stat_cost_video:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_live" label="直播消耗" width="140" sortable="custom" >
                        <template slot-scope="scope">
                            {{scope.row.stat_cost_live?scope.row.stat_cost_live:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="总消耗" width="180" sortable="custom" >
                        <template slot-scope="scope">
                            <span class="cost_font">{{scope.row.stat_cost?scope.row.stat_cost:'0'}}</span>
                            <div class="cost_ratio">
                                <div>较上周期</div>
                                <div class="ratio" style="color: #00C271;" v-if="costrate(scope.row.stat_cost_rate) == 'dow'">
                                    <img src="../../assets/img/decline.svg"/> <span> {{ (scope.row.stat_cost_rate * 100).toFixed(2) }}%</span>
                                </div>
                                <div class="ratio" style="color: #FE6262;" v-else-if="costrate(scope.row.stat_cost_rate) == 'up'">
                                    <img src="../../assets/img/rise.svg"/> <span> {{ (scope.row.stat_cost_rate * 100).toFixed(2) }}%</span>
                                </div>
                                <div class="ratio" v-else>——</div>
                        </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_rate" label="总消耗占比" width="140" sortable="custom" >
                        <template slot-scope="scope">
                            <span class="cost_font">{{scope.row.stat_cost_rate? scope.row.stat_cost_rate :'0' | keepTwoNum}}%</span>
                        </template>
                    </el-table-column>
                     
                </el-table>
            </div>
  </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                job: this.$route.query.job,
                need_date: this.$route.query.need_date,
                user: this.$route.query.user_id,
                order: "desc",
                query: "",
            },
            total: 1,
            tableData: [],
            channelList:['千川', 'UD', '巨量', '腾讯', 'TK', '京易投']
        };
    },
    created() {
        this.getDataList();
    },
    computed: {
        costrate(){
            return (data) => {
                if(data == 0){
                 return '-'
                }else if(data > 0){
                 return 'up'
                }else{
                 return 'dow'
                }
            }
        }
    },
    methods: {
        
        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/materialv2/dataListDetail",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },
        // 表格排序
        sortChange(column) {
            console.log(column)
            if (!column.order) {
                this.queryInfo.field = undefined;
                this.queryInfo.order = "desc";
                this.getDataList();
                return;
            }
            this.queryInfo.order = column.order.slice(0, -6);
            this.queryInfo.field = column.prop;
            this.getDataList();
        },
        getProName(row){
            let brand = row.brand_name
            let product = row.product_name
            let area = ''
            let scene = ''
            if(row.business_scene==1){
                scene = '短视频原创'
            }else if(row.business_scene==2){
                scene = '短视频混剪'
            }else if(row.business_scene==3){
                scene = '直播素材'
            }else if(row.business_scene==4){
                scene = '直播直投'
            }else if(row.business_scene==5){
                scene = '短视频'
            }else if(row.business_scene==6){
                scene = '直播'
            }

            if(row.area==1){
                area = '深圳'
            }else if(row.area==2){
                area = '杭州'
            }
            
            return `<span style="font-weight:bold">${brand}</span> / ${product} / ${scene} / ${area}` 
        },
    },
};
</script>

<style>
.cost_ratio{
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #B4B7BD;
}
.ratio{
    padding-left: 8px;
    display: flex;
    /* align-items: center; */
}
.ratio img{
    padding-top: 2px;
    padding-right: 2px;
    width: 16px;
    height: 16px;
}
</style>